import React from 'react'
import { View, Dimensions } from 'react-native'

import { useStores } from '../stores'
import { observer } from 'mobx-react-lite'

export const Spacer = observer(() => {
  const { appearance: ap } = useStores()
  return <View style={{ ...styles.spacer, backgroundColor: ap.theme.tiny }}></View>
})

export const Blank = () => (
  <View style={{ height: 50, flex: 1 }}></View>
)

export const Gap = ({gap = 12, color }) => {
  return color && <View style={{ flex: 1, height: gap, backgroundColor: color }}></View> || <View style={{ flex: 1, height: gap }}></View>
}

const styles = {
  spacer: {
    width: Dimensions.get('window').width,
    height: 1,
    marginTop: 3,
    marginBottom: 3,
  },
}